<template>
    <!-- 卡片面包屑 -->
    <el-card shadow="always">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="/">用户管理</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
    </el-card>
    <!-- 内容区域 -->
    <el-card shadow="always">
        <!-- 搜索和添加用户 -->
        <div class="mt-4">
            <el-input
                placeholder="请输入要查询的内容"
                class="input-with-select input-search"
                size="large"
                v-model="queryinfoData.queryinfo.query"
            />
            <div class="group-btn">
                <el-button :icon="Search" @click="SearchUser">搜索</el-button>
                <el-button :icon="CirclePlus" type="primary" @click="dialogUserVisible = true">添加用户</el-button>
            </div>
        </div>
        <el-table :data="userDataMenus.userData" border style="width: 100%">
            <el-table-column prop="username" label="用户名" width="180" />
            <el-table-column prop="role_name" label="角色名" width="180" />
            <el-table-column prop="mobile" label="电话" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="mg_state" label="状态">
                <template v-slot="scope">
                    <el-switch
                        v-model="scope.row.mg_state"
                        class="ml-2"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        @click="changeUserStatus(scope.row)"
                    />
                </template>
            </el-table-column>
            <el-table-column prop label="操作">
                <template v-slot="scope">
                    <el-button :icon="Search" circle @click="checkUserinfo(scope.row)"></el-button>
                    <el-button
                        type="primary"
                        :icon="EditPen"
                        circle
                        @click="modifyUserData(scope.row)"
                    ></el-button>
                    <el-button
                        type="danger"
                        :icon="Delete"
                        circle
                        @click="DeleteUserData(scope.row)"
                    ></el-button>
                    <el-button
                        type="warning"
                        :icon="Setting"
                        circle
                        @click="AssignUserRolesData(scope.row)"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 按钮 -->
        <el-pagination
            :page-sizes="[1, 3, 5, 7]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :current-page="queryinfoData.queryinfo.pagenum"
            :page-size="queryinfoData.queryinfo.pagesize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </el-card>
    <!-- 添加用户弹窗 -->
    <el-dialog v-model="dialogUserVisible" title="添加用户" class="messageTan">
        <el-form :model="addUserDataBox.adduserData">
            <el-form-item label="用户名">
                <el-input
                    v-model="addUserDataBox.adduserData.username"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
            <el-form-item label="密码">
                <el-input
                    v-model="addUserDataBox.adduserData.password"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input
                    v-model="addUserDataBox.adduserData.email"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input
                    v-model="addUserDataBox.adduserData.mobile"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogUserVisible = false">取消</el-button>
                <el-button type="primary" @click="addUserInfo">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 查看用户弹窗 -->
    <el-dialog v-model="dialogUserDataVisible" title="用户信息" class="messageTan">
        <el-form :model="checkUserDataBox.checkUserData">
            <el-form-item label="用户名">
                <el-input
                    v-model="checkUserDataBox.checkUserData.username"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
            <el-form-item label="角色ID">
                <el-input
                    v-model="checkUserDataBox.checkUserData.rid"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input
                    v-model="checkUserDataBox.checkUserData.email"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input
                    v-model="checkUserDataBox.checkUserData.mobile"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogUserDataVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogUserDataVisible = false">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 修改用户弹窗 -->
    <el-dialog v-model="dialogModifyUserDataVisible" title="修改信息" class="messageTan">
        <el-form :model="modifyUserDataBox.modifyUserData">
            <el-form-item label="用户名">
                <el-input
                    v-model="modifyUserDataBox.modifyUserData.username"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
            <el-form-item label="角色名称">
                <el-input
                    v-model="modifyUserDataBox.modifyUserData.role_name"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input
                    v-model="modifyUserDataBox.modifyUserData.email"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input
                    v-model="modifyUserDataBox.modifyUserData.mobile"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="modifyUserDataOut">取消</el-button>
                <el-button type="primary" @click="modifyUserDataYes">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 分配用户角色弹窗 -->
    <el-dialog v-model="dialogAssignRolesVisible" title="修改信息" class="messageTan">
        <el-form :model="assignRolesDataBox.assignRolesData">
            <el-form-item label="用户名">
                <el-input
                    v-model="assignRolesDataBox.assignRolesData.username"
                    autocomplete="off"
                    size="large"
                />
            </el-form-item>
            <el-select v-model="RoleId" class="m-2" size="large">
                <el-option
                    v-for="item in assignRolesDataBox.assignUserRoles"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id"
                />
            </el-select>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAssignRolesVisible = false">取消</el-button>
                <el-button type="primary" @click="ChangeAssignUserRoles">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import '../assets/style/commonStyle.css'
import { myaxios } from '../request/index';
import { CloseBold, Search, Message, Delete, CirclePlus, Setting, EditPen } from '@element-plus/icons-vue'
import router from '../router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
//分页传递
const queryinfoData = reactive({
    queryinfo: {
        //查询参数
        query: "",
        //显示条数
        pagesize: 3,
        //页数
        pagenum: 1,
    }
})
const total = ref('')
let userDataMenus = reactive({
    userData: []
})
//添加用户储存
const addUserDataBox = reactive({
    adduserData: {
        username: '',
        password: '',
        email: '',
        mobile: ''
    }
})
//查看用户信息储存
const checkUserDataBox: any = reactive({
    checkUserData: {}
})
//查看修改用户信息
const modifyUserDataBox: any = reactive({
    modifyUserData: {},

})
//分配用户信息
const assignRolesDataBox: any = reactive({
    assignRolesData: '',
    assignUserRoles: []
})
const RoleId = ref('')
//弹窗--添加
let dialogUserVisible = ref(false);
//弹窗--查看信息
let dialogUserDataVisible = ref(false)
//弹窗 -- 修改用户信息
let dialogModifyUserDataVisible = ref(false)
//删除用户弹窗
let dialogDeleteUserVisible = ref(false)
//分配弹窗
let dialogAssignRolesVisible = ref(false)
//pageSize 改变时触发
const handleSizeChange = (newsize: any) => {
    queryinfoData.queryinfo.pagesize = newsize
    getUsers()
}
//current-change 改变时触发
const handleCurrentChange = (newpage: any) => {
    queryinfoData.queryinfo.pagenum = newpage
    getUsers()

}
//封装
const getUsers = async () => {
    let { data } = await myaxios.get('/users', { params: queryinfoData.queryinfo })
    // console.log(data);
    if (data.meta.status == 200) {
        userDataMenus.userData = data.data.users;
        total.value = data.data.total
    }
}
//修改用户状态
const changeUserStatus = async (rows: { id: any; mg_state: any; }) => {
    //请求
    const { data } = await myaxios.put(`/users/${rows.id}/state/${rows.mg_state}`)
    // console.log(data);
    if (data.meta.status == 200) {
        ElMessage({
            type: 'success',
            message: data.meta.msg,
        })
    } else {
        ElMessage({
            type: 'error',
            message: data.meta.msg,
        })
    }

}
//搜索用户
const SearchUser = async () => {
    //请求
    getUsers()
    queryinfoData.queryinfo.query = ''
}
//添加用户
const addUserInfo = async () => {
    //请求
    const { data } = await myaxios.post('/users', addUserDataBox.adduserData)
    // console.log(data);
    if (data.meta.status == 201) {
        ElMessage({
            type: 'success',
            message: data.meta.msg
        })
        dialogUserVisible.value = false;
        getUsers()
    } else {
        ElMessage({
            type: 'error',
            message: data.meta.msg
        })
    }


}
//查看用户具体信息
const checkUserinfo = async (rows: { id: string; }) => {
    // console.log(21212);
    dialogUserDataVisible.value = true
    const { data } = await myaxios.get('users/' + rows.id)
    console.log(data);
    if (data.meta.status == 200) {
        ElMessage({
            type: 'success',
            message: data.meta.msg
        })
        checkUserDataBox.checkUserData = data.data

    } else {
        ElMessage({
            type: 'error',
            message: data.meta.msg
        })
    }
}
//修改用户信息
const modifyUserData = async (rows: any) => {
    dialogModifyUserDataVisible.value = true
    // console.log(rows);
    modifyUserDataBox.modifyUserData = rows

}
//修改用户信息确认
const modifyUserDataYes = async () => {
    //请求
    const { data } = await myaxios.put('/users/' + modifyUserDataBox.modifyUserData.id, modifyUserDataBox.modifyUserData)
    // console.log(data);
    if (data.meta.status == 200) {
        ElMessage({
            type: 'success',
            message: data.meta.msg
        })
        dialogModifyUserDataVisible.value = false
        getUsers()

    } else {
        ElMessage({
            type: 'error',
            message: data.meta.msg
        })
    }
}
//取消更新后页面重新渲染
const modifyUserDataOut = () => {
    dialogModifyUserDataVisible.value = false
    getUsers()
}
//删除用户信息
const DeleteUserData = (rows: any) => {
    dialogDeleteUserVisible.value = true
    ElMessageBox.confirm('你确定要删除该用户嘛？')
        .then(async () => {
            const { data } = await myaxios.delete('/users/' + rows.id)
            if (data.meta.status == 200) {
                ElMessage({
                    type: 'success',
                    message: data.meta.msg
                })
            } else {
                ElMessage({
                    type: 'error',
                    message: data.meta.msg
                })
            }
            // console.log(data);
            getUsers()

        })
        .catch(() => {
            // catch error
        })
}
//分配用户角色
const AssignUserRolesData = async (rows: any) => {
    dialogAssignRolesVisible.value = true
    assignRolesDataBox.assignRolesData = rows
    const { data } = await myaxios.get('/roles')
    console.log(data);
    assignRolesDataBox.assignUserRoles = data.data

}
const ChangeAssignUserRoles = async () => {
    // console.log(assignRolesDataBox.assignRolesData.id);

    const { data } = await myaxios.put(`users/${assignRolesDataBox.assignRolesData.id}/role`, { rid: RoleId.value })
    // console.log(data);
    dialogAssignRolesVisible.value = false
    if (data.meta.status == 200) {
        ElMessage({
            type: 'success',
            message: data.meta.msg
        })
getUsers()
    } else {
        ElMessage({
            type: 'error',
            message: data.meta.msg
        })
    }

}



//渲染之前
onMounted(async () => {
    getUsers()

})


</script>

<style>
.el-pagination {
    margin: 0 auto;
}
.input-search {
    width: 250px;
}
.group-btn {
    margin: 8px auto;
}
.el-form-item {
    width: 400px;
    margin: 0 auto;
    padding: 10px 0;
}
.el-form-item__label {
    width: 80px;
    text-align: center;
}
</style>